<template>
  <div class="basic-page">
    <h1>基础 Vue 3 页面</h1>
    <p>计数器：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
const decrement = () => count.value--
</script>

<style scoped>
.basic-page {
  max-width: 400px;
  margin: 40px auto;
  padding: 24px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  text-align: center;
}
button {
  margin: 0 8px;
  padding: 6px 16px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background: #42b983;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover {
  background: #369870;
}
</style> 